import { View, Image, Text } from "@tarojs/components"
import Taro from '@tarojs/taro'
import { useState } from "react"
import CommentPanel from "../../../components/comment-panel/index"
import { commentPanelType } from "../../../components/comment-panel/types"
import { collectionCardType } from "../type"
import './index.less'

type propsType = collectionCardType & { clickDisabled?: boolean }

function CollectionCard(props: propsType) {
    const { height, collection, showToolbar } = props
    const clickDisabled = props?.clickDisabled ?? false
    const _showToolbar = showToolbar ?? true
    const { publisher, content } = collection

    const [isLike] = useState(props?.collection?.user?.isLike ?? false)

    function toCollectionDetail() {
        if (!clickDisabled) {
            Taro.navigateTo({
                url: '/pages/collection/collection-detail/index?data=' + JSON.stringify(props)
            })
        }
    }

    const panel: commentPanelType = [
        {
            key: 'share',
        },
        {
            key: 'menu',
            onClick: toCollectionDetail
        },
        {
            key: 'heart',
            onClick: setCollection
        },
    ]

    function setCollection() {
        isLike ? collection.content.like-- : collection.content.like++
        collection.user = { isLike: !isLike }
        Taro.eventCenter.trigger('setCollection', { id: collection.id, val: collection })
    }

    function clickCard() {
        if (!clickDisabled) {
            Taro.navigateTo({
                url: '/pages/collection/collection-detail/index?data=' + JSON.stringify(props)
            })
        }
    }

    return <View className='collection-card'>
        <View className='at-row at-row__align--center row' onClick={() => clickCard()}>
            <Image className='avatar' src={publisher.avatar} />
            <Text>{publisher.name}</Text>
        </View>
        <View className='row' onClick={() => clickCard()}>
            <View className='at-row at-row--wrap'>
                {
                    content.clothes.map((v, k) => {
                        return <Image className='at-col at-col-3 clothes' src={v} key={k} style={{ height }} />
                    })
                }
            </View>
            <View className='text'>{content.text}</View>
        </View>
        {
            _showToolbar &&
            <CommentPanel collection={collection} panel={panel} showNum />
        }
    </View>
}

export default CollectionCard